<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import type { Card, TabType, CardCategoryType } from '../types/card'
import CardItem from '../components/card/CardItem.vue'
import CardTypeSelector from '../components/card/CardTypeSelector.vue'
import CardFilter from '../components/card/CardFilter.vue'

const { t } = useI18n()

// 当前选中的Tab
const activeTab = ref<TabType>('cardManagement')

// 卡片数据
const cards = ref<Card[]>([
  {
    cardHolder: {
      createdAt: 15223542323,
      updatedAt: 13453123213,
      createdAtString: "2025-02-12",
      updatedAtString: "2025-02-12",
      id: 1,
      memberId: 1,
      email: 'email',
      firstName: "firstName",
      lastName: "lastName",
      countryCode: "countryCode",
      phoneNumber: "13112345678",
      city: "广东省",
      country: "中国",
      line1: "line1",
      postalCode: "588000",
      state: "line1",
      line2: "line2",
      udpayCardholderId: "udpayCardholderId",
      udpayCardholderStatus: "udpayCardholderStatus",
      cardsCount: 1,
    },
    remark: 'remark',
    cardHolderId: 1,
    cardProductId: 1,
    createdAt: 1,
    createdAtString: "createdAtString",
    id: 1,
    member: {
      email: "email", // 展示用户邮箱
    },
    memberId: 1,
    openCardOrderId: 1,
    successUdpayWebhookEventId: "111",
    type: 1, // 1: 虚拟卡
    udpayAvailableBalance: "111", // 可用余额
    udpayCardBin: "111", // 卡bin
    udpayCardCurrency: "111", // 币种
    udpayCardId: "111",
    udpayCardLimit: 1,
    udpayCardMetadata: "111",
    udpayCardModeType: "111",
    udpayCardNumber: "111",
    udpayCardOrderId: "111",
    udpayCardOrderStatus: "111",
    udpayCardProductId: "111",
    udpayCardScheme: "visa", // visa或mastercard
    udpayCardSpendingControls: "111",
    udpayCardStatus: "ACTIVE", // PENDING, ACTIVE, INACTIVE等
    udpayCardholderId: "111",
    udpayCvv: "111",
    udpayExpireDate: "111",
    udpayFormFactor: "111",
    udpayMaskedCardNumber: "111*****2312332", // 遮罩卡号
    updatedAt: 1,
    updatedAtString: "111",
    category: {
      level: 1,
      name: "金卡"
    }

  },
])

// 筛选条件
const selectedCardCategory = ref<CardCategoryType | null>(null)
const selectedCardHolder = ref<string | null>(null)
const showCardHolderDropdown = ref(false)

// 卡片分类选项
const cardCategories = [
  { id: 'virtual', name: '虚拟卡' },
  { id: 'normal', name: '普卡' },
  { id: 'gold', name: '金卡' }
]

// 持卡人列表
const cardHolders = computed(() => {
  const holders = new Set<string>()
  cards.value.forEach(card => {
    if (card.cardHolder) {
      holders.add(card.cardHolder)
    }
  })
  return Array.from(holders)
})

// 根据筛选条件过滤卡片
const filteredCards = computed(() => {
  return cards.value.filter(card => {
    // 如果选择了卡片分类，则过滤
    if (selectedCardCategory.value && card.cardType !== selectedCardCategory.value) {
      return false
    }
    
    // 如果选择了持卡人，则过滤
    if (selectedCardHolder.value && card.cardHolder !== selectedCardHolder.value) {
      return false
    }
    
    return true
  })
})

// 切换Tab
const switchTab = (tab: TabType) => {
  activeTab.value = tab
}

// 选择卡片分类
const selectCardCategory = (category: CardCategoryType) => {
  selectedCardCategory.value = category === selectedCardCategory.value ? null : category
}

// 切换卡片分类筛选
const toggleCategoryFilter = () => {
  // 这里可以实现卡片分类筛选的逻辑
}

// 切换持卡人筛选
const toggleCardHolderFilter = () => {
  showCardHolderDropdown.value = !showCardHolderDropdown.value
}

// 选择持卡人
const selectCardHolder = (holder: string) => {
  selectedCardHolder.value = holder === selectedCardHolder.value ? null : holder
  showCardHolderDropdown.value = false
}
</script>

<template>
  <div class="card-center-page text-white min-h-screen">
    <!-- Tab导航栏 -->
    <div class="tab-nav flex rounded-lg overflow-hidden mb-4">
      <div
        class="tab-item flex-1 py-3 text-center cursor-pointer"
        :class="activeTab === 'cardManagement' ? 'bg-black text-white' : 'bg-gray-700 text-gray-300'"
        @click="switchTab('cardManagement')"
      >
        卡片管理
      </div>
      <div
        class="tab-item flex-1 py-3 text-center cursor-pointer"
        :class="activeTab === 'cardHolders' ? 'bg-black text-white' : 'bg-gray-700 text-gray-300'"
        @click="switchTab('cardHolders')"
      >
        持卡人列表
      </div>
      <div
        class="tab-item flex-1 py-3 text-center cursor-pointer"
        :class="activeTab === 'rechargeRecords' ? 'bg-black text-white' : 'bg-gray-700 text-gray-300'"
        @click="switchTab('rechargeRecords')"
      >
        充卡记录
      </div>
    </div>
    
    <!-- 卡片管理内容 -->
    <div v-if="activeTab === 'cardManagement'" class="card-management">
      <!-- 筛选条件 -->
      <div class="relative">
        <CardFilter
          :cardHolders="cardHolders"
          :selectedCardHolder="selectedCardHolder"
          @toggleCategoryFilter="toggleCategoryFilter"
          @toggleCardHolderFilter="toggleCardHolderFilter"
          @selectCardHolder="selectCardHolder"
        />
        
        <!-- 持卡人下拉菜单 -->
        <div v-if="showCardHolderDropdown" class="card-holder-dropdown bg-gray-800 rounded-md mt-2 p-2 absolute right-0 z-10">
          <div
            v-for="holder in cardHolders"
            :key="holder"
            class="holder-item py-2 px-3 cursor-pointer hover:bg-gray-700 rounded"
            :class="selectedCardHolder === holder ? 'bg-gray-700' : ''"
            @click="selectCardHolder(holder)"
          >
            {{ holder }}
          </div>
        </div>
      </div>
      
      <!-- 卡片类型选择 -->
      <CardTypeSelector
        :selectedType="selectedCardCategory"
        :categories="cardCategories"
        @select="selectCardCategory"
      />
      
      <!-- 卡片数量 -->
      <div class="card-count flex items-center py-2 mb-4">
        <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM20 18H4V12H20V18ZM20 8H4V6H20V8Z" fill="currentColor"/>
        </svg>
        <span>卡片数量：{{ filteredCards.length }}</span>
      </div>
      
      <!-- 卡片列表 -->
      <div class="card-list">
        <CardItem
          v-for="card in filteredCards"
          :key="card.id"
          :card="card"
          :showOperatorBtn="false"
        />
      </div>
    </div>
    
    <!-- 持卡人列表内容 -->
    <div v-else-if="activeTab === 'cardHolders'" class="card-holders px-4">
      <div class="placeholder py-8 text-center text-gray-500">
        持卡人列表内容
      </div>
    </div>
    
    <!-- 充卡记录内容 -->
    <div v-else-if="activeTab === 'rechargeRecords'" class="recharge-records px-4">
      <div class="placeholder py-8 text-center text-gray-500">
        充卡记录内容
      </div>
    </div>
  </div>
</template>

<style scoped>
.tab-nav {
  background-color: #333;
}

.card-type-btn {
  transition: all 0.3s ease;
}
</style>